<template>
  <div> 
      <div class="film_type">
            <router-link to="/film/in_theaters/list">正在上映</router-link>
            <router-link to="/film/coming_soon/list">即将上映</router-link>
            <router-link to="/film/top250/list">豆瓣电影top250</router-link>
      </div>
      <div class="search_box">
          <input placeholder="请输入要搜索的电影..." type="text" class="search" v-model="search">
          <input class="search_btn" @click="fSearch" value="搜索" type="button">
      </div>
      <div class="film_item">
            <h1>{{movieData.title}}</h1>
            <div class="pages">

            </div>
            <div class="film_group" >
                   <transition-group name="list">
                        <filmItem v-for="(item,index) in movieData.subjects" :key="index" :itemData="item"></filmItem> 
                  </transition-group>
                
            </div>
            
        </div>
      
  </div>
</template>
<script>
import jsonp from "../js/jsonp";
var filmItem = () => import("../components/common/filmItem");
export default {
  props: ["type"],
  data: function() {
    return {
      show: false,
      baseUrl: "https://api.douban.com",
      type_film: "", //电影类型
      count: 5, //请求条数
      city: "上海", //城市
      current: 1, //当前页数
      totalCount: 0, // 总条数
      totalPage: 0, //总页数
      movieData: {}, //电影信息
      search: "" //要搜索的电影
    };
  },
  created: function() {
    console.log(this.type, "----");
  },
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      vm.type_film = to.params.type;
      vm.current = 1;
      vm.loadData(vm.current);
    });
  },
  beforeRouteUpdate(to, from, next) {
    this.type_film = to.params.type;
    this.current = 1;
    this.loadData(this.current);
    next();
  },
  methods: {
    loadData: function(cur) {
      var self = this;
      this.loading();
      let url = `${this.baseUrl}/v2/movie/${this.type_film}`;
      console.log(`请求地址------${url}`);
      jsonp(
        url,
        {
          city: this.city,
          start: (cur - 1) * this.count,
          count: this.count
        },
        function(data) {
          console.log("loadData", cur);
          this.movieData = data;
          this.pagesInit({
            data: {
              total: Math.ceil(data.total / this.count),
              current: cur
            },
            callBack: function(val) {
              console.log("-----", val);
              self.loadData(val);
            },
            container: ".pages"
          });
          this.loadEnd();
        }.bind(this)
      );
    },
    fSearch: function() {
      if (this.search === "") {
        return false;
      }
      this.pagesUnmounted();
      this.loading();
      let url = `${this.baseUrl}/v2/movie/search`;
      console.log(`请求地址------${url}`);
      jsonp(
        url,
        {
          q: this.search
        },
        function(data) {
          this.movieData = data;
          console.log(data);

          this.loadEnd();
        }.bind(this)
      );
    }
  },
  components: {
    filmItem
  }
};
</script>
<style scoped>
.pages {
  margin: 0.4rem auto;
}
.search_box {
  width: 85%;
  margin: 0 auto 0.4rem;
  text-align: left;
}
.search {
  border: 1px solid #ccc;
  height: 0.4rem;
  padding: 0 0.2rem;
  box-sizing: border-box;
  font-size: 0.16rem;
}
.search_btn {
  -webkit-appearance: none;
  height: 0.4rem;
  /* padding: .2rem; */
  box-sizing: border-box;
  line-height: 0.4rem;
  padding: 0 0.2rem;
  cursor: pointer;
  font-size: 0.16rem;
}
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
a {
  padding: 0.05rem 0.1rem;
  border: 1px solid #111;
  border-radius: 3px;
  font-size: 0.24rem;
  margin-left: 0.2rem;
  color: #111;
}
.router-link-active {
  color: #fff;
  background: #111;
}
.film_type {
  margin-bottom: 0.3rem;
}
h1 {
  font-size: 0.28rem;
  text-align: left;
  border-bottom: 1px solid #ccc;
  padding-left: 0.1rem;
  padding-bottom: 0.09rem;
  width: 85%;
  margin: 0 auto;
}
.film_group {
  width: 90%;
  padding: 0.2rem;
  margin: 0.4rem auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  min-height: 400px;
}
</style>

